<template>
	<view>
		<u-navbar :is-back="true" title="订单详情"></u-navbar>
		<view class="content">
			<!-- <view class="status">
				{{data.statusStr}}
			</view> -->
			<view class="formBox">
				<view class="title">订单详情</view>
				<view class="">
					<view class="label">服务标签：<span>{{data.type}}</span></view>
					<view class="label">订单编号：<span>{{data.no}}</span></view>
					<view class="label">服务名称：<span>{{data.name}}</span></view>
					<view class="label">用户昵称：<span>{{data.customerName}}</span></view>
					<view class="label">联系电话：<span>{{data.customerPhone}}</span></view>
					<view class="label">商品价格/元：<span>￥{{data.price}}</span></view>
					<view class="label">实际支付价格：<span>￥{{data.amount}}</span></view>
					
					<view class="label">支付时间：<span>{{data.payTime}}</span></view>
					<view class="label">服务归属门店：<span>{{data.storeName}}</span></view>
					<view class="label">套餐介绍：
						<view>{{data.explain}}</view>
					</view>
					
				</view>
			</view>
			
			<view class="formBox">
				<view class="title">商品/项目</view>
				<view class="f-c-sb" v-for='(item,index) in data.goodsVos' :key='index'>
					<view class="label">{{item.goodsServerName}}</view>
					<view class="label">{{item.goodsServerNumber}}</view>
					<view class="label">{{item.goodsServerPrice}}</view>
				</view>
			</view>
			
			<view class="formBox">
				<view class="title">适用门店</view>
				<view v-for="(item,index) in data.storeList" :key='index'>
					<view class="label">{{item}}</view>
				</view>
			</view>
			
			<view class="formBox" v-if='param.moneyType!==1'>
				<view class="title">已核销(结算项目)</view>
				<view class="writeOff"  v-for="(item,index) in data.writeOffVos" :key='index'>
					<view class="label">商品/项目名称：{{item.gsName}}</view>
					<view class="label">核销数量：{{item.number}}</view>
					<view class="label">价值/元：￥{{item.gsPrice}}</view>
					
					<view class='label'>核销人员：{{item.writeOffUser}}</view>
					<view class='label'>核销时间：{{item.writeOffTime}}</view>
					<view class='label'>核销门店：{{item.writeStoreName}}</view>
				</view>
			</view>
			
			<view class="formBox">
        <view class="title" v-if="param.moneyType==1">入账信息</view>
        <view v-if="param.moneyType==2 || param.moneyType==3" class="title">结算信息</view>
        <view class="title" v-if="param.moneyType==4">佣金明细</view>
        <view class="title" v-if="param.moneyType==5">收入明细</view>
        <view v-if='param.moneyType==1 || param.moneyType==2 || param.moneyType==3'>
          <view class="label">支付方：<span>{{ data.entryInfoVos.drawee }}</span></view>
          <view v-if="data.entryInfoVos.settlementWay" class="label">支付类型：<span>{{
              data.entryInfoVos.settlementWay
            }}</span></view>
        </view>
        <view v-if="param.moneyType==1">
          <view class="label">备注：<span>{{ data.entryInfoVos.remark }}</span></view>
          <view class="label">入账时间：<span>{{ data.entryInfoVos.settlementTime }}</span></view>
          <view class="label">处理人：<span>{{ data.entryInfoVos.settlementPeople }}</span></view>
          <view class="label">
            <view>入账凭证</view>
            <view v-for="(item,index) in data.entryInfoVos.voucherUrl" :key="index">
              <image :src="imagePath+item" class="img"
                     @click="privewImg(imagePath+item)"></image>

            </view>
          </view>
          <view class="label">入账金额：<span>{{ data.entryInfoVos.settlementAmount }}/元</span></view>
        </view>
        <view v-if='param.moneyType==2'>
          <view class="label">待结算金额：<span>{{ data.entryInfoVos.writePrice }}</span></view>
        </view>
        <view v-if="param.moneyType==3">
          <view class="label">收款门店：<span>{{ data.entryInfoVos.collectionStore }}</span></view>
          <view class="label">实际结算金额：<span>{{ data.entryInfoVos.actualAmount }}</span></view>
          <view class="label">备注：<span>{{ data.entryInfoVos.remark }}</span></view>
          <view class="label">结算时间：<span>{{ data.entryInfoVos.settlementTime }}</span></view>
          <view class="label">处理人：<span>{{ data.entryInfoVos.settlementPeople }}</span></view>
          <view class="label">
            <view>结算凭证</view>
            <image v-for="(item,index) in data.entryInfoVos.voucherUrl"
                   :src="imagePath+item" class="img"
                   @click="privewImg(imagePath+item)"></image>
          </view>
        </view>
				<view v-if='param.moneyType==4'>
					<view class="label">收入佣金金额：<span>{{data.entryPrice}}</span></view>
				</view>
				<view v-if='param.moneyType==5'>
					<view class="label">收款门店：<span>{{data.collectionStore}}</span></view>
					<view class="label">收款金额：<span>{{data.collectionPrice}}</span></view>
					<view class="label">收款说明：<span>{{data.collectionRemark}}</span></view>
					<view class="label">收款时间：<span>{{data.collectionTime}}</span></view>
				</view>
				<view>
					<view class="label">明细：</view>
					<view class='detailInfo'>
						商品价格：¥{{data.settlementDetailVos.priceStr}}/元<br>
						
						优惠券抵扣金额：¥{{data.settlementDetailVos.moneyStr}}/元<br>
						
						用户实际支付金额：¥{{data.settlementDetailVos.payPrice}}/元<br>
						
						平台扣除活动订单佣金比例：{{data.settlementDetailVos.proportion}}/%<br>
						
						平台扣除佣金金额：{{data.settlementDetailVos.deductionPrice}}/元<br>
						
						入账金额：¥{{data.settlementDetailVos.entryMoney}}/元<br>
					</view>
					<view class='detailInfo' v-if="param.moneyType!=1">
						本次核销门店：{{data.settlementDetailVos.storeName}}<br>
						
						核销总价值：¥{{data.settlementDetailVos.gsPrice}}/元<br>
						
						直营门店扣除活动订单佣金比例：{{data.settlementDetailVos.rateOfDirectStores}}/%<br>
						
						直营门店扣除佣金金额：¥{{data.settlementDetailVos.costOfDirectStores}}/元<br>
						
						结算-“{{data.settlementDetailVos.storeName}}”金额：¥{{data.settlementDetailVos.settlementAmount}}/元<br>
					</view>
				</view>
			</view>
		</view>
	  
	</view>
</template>

<script>
import {incomeDetailInfo} from '@/api/my';
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
		imagePath:this.$imagePath,
      param: {},
      data: {}

    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
		
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		    // JSON.parse() 由JSON字符串转换为JSON对象
		    let objParam=JSON.parse(option.param);
		    this.param=objParam;
			console.log(this.param);
			this.init();
   
		},
		methods: {
      init() {
        this.getList();
      },
      privewImg(src) {
        uni.previewImage({
          current: src, // 当前显示图片的http链接
          urls: [src] // 需要预览的图片http链接列表
        });
      },
      getList() {
        incomeDetailInfo(this.param).then(res => {
          this.data = res.data;
          console.log(res.data);
        })
      }
    }
	}
</script>

<style lang="less">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #ededed;
		padding-top:20rpx;
		padding-bottom:20rpx;
		.status{
			width: 660rpx;
			margin: 0 auto;
			color: #177fff;
			line-height: 48px;
			font-size: 32rpx;
			font-weight: bold;
		}
		.formBox{
			width: 660rpx;
			padding:15rpx 24rpx;
			margin-top: 0;
			margin-bottom: 20rpx;
			.title{
				font-size: 28rpx;
				color: #333;
				line-height: 65rpx;
				border-bottom: none;
			}
			.title:before{
				position: relative;
				top:4rpx;
				content: "";
				display: inline-block;
				width: 8rpx;
				height: 25rpx;
				background: #177fff;
				border-radius: 4px;
				margin-right: 10rpx;
			}
			.subtitle{
				line-height: 60rpx;
				font-size: 32rpx;
				color: #777;
			}
			.label{
				font-size: 28rpx;
				color: #999;
				line-height: 54rpx;
				span{
					color:#333;
				}
			}
			.red{
				color: #ff6738;
			}
			.storeImage{
				display: flex;
				justify-content: space-between;
				.img{
					width: 30%;
					height: auto;
				}
			}
		}
		.formBox:last-child{
			margin-bottom: 0;
		}
		.detailInfo{
			font-size: 22rpx;
			line-height: 40rpx;
			color:#777;
		}
	
	}
	
    
</style>
